<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '../stores';

const router = useRouter();
const userStore = useUserStore();

// 轮播图索引
const currentSlide = ref(0);
const slides = [
  {
    image: 'https://images.unsplash.com/photo-1591279304658-b894b00c0a87?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1600&q=80',
    alt: '鲜花促销'
  },
  {
    image: 'https://images.unsplash.com/photo-1586968895917-80585d521b92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    alt: '红玫瑰花束'
  },
  {
    image: 'https://images.unsplash.com/photo-1533616688419-b7a585564566?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    alt: '混合鲜花花束'
  }
];

// 轮播图定时器
let slideInterval: number | null = null;
const slideIntervalTime = 5000; // 5秒切换一次
const isHovering = ref(false);

// 切换轮播图
const changeSlide = (index: number) => {
  currentSlide.value = index;
};

// 下一张轮播图
const nextSlide = () => {
  currentSlide.value = (currentSlide.value + 1) % slides.length;
};

// 上一张轮播图
const prevSlide = () => {
  currentSlide.value = (currentSlide.value - 1 + slides.length) % slides.length;
};

// 开始自动轮播
const startSlideInterval = () => {
  if (!isHovering.value) {
    slideInterval = window.setInterval(() => {
      nextSlide();
    }, slideIntervalTime);
  }
};

// 停止自动轮播
const stopSlideInterval = () => {
  if (slideInterval) {
    clearInterval(slideInterval);
    slideInterval = null;
  }
};

// 鼠标悬停时暂停轮播
const handleMouseEnter = () => {
  isHovering.value = true;
  stopSlideInterval();
};

// 鼠标离开时恢复轮播
const handleMouseLeave = () => {
  isHovering.value = false;
  startSlideInterval();
};

// 组件挂载时启动轮播
onMounted(() => {
  startSlideInterval();
  // 初始化用户状态
  userStore.initializeAuth();
});

// 组件卸载时清除定时器
onUnmounted(() => {
  stopSlideInterval();
});

// 用户登出
const handleLogout = () => {
  userStore.logout();
  router.push('/login');
};

// 商品分类
const categories = [
  { icon: 'heart', color: 'rose', name: '爱情鲜花' },
  { icon: 'birthday-cake', color: 'blue', name: '生日鲜花' },
  { icon: 'dove', color: 'yellow', name: '友情鲜花' },
  { icon: 'seedling', color: 'green', name: '全部分类' },
  { icon: 'graduation-cap', color: 'purple', name: '毕业鲜花', hideOnMobile: true },
  { icon: 'hands-helping', color: 'pink', name: '祝福鲜花', hideOnMobile: true },
  { icon: 'home', color: 'amber', name: '开业花篮', hideOnMobile: true },
  { icon: 'gift', color: 'teal', name: '礼品鲜花', hideOnMobile: true }
];

// 热门推荐商品
const hotProducts = [
  {
    image: 'https://images.unsplash.com/photo-1586968895917-80585d521b92?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    name: '浪漫红玫瑰花束',
    price: 199,
    hideOnMobile: false
  },
  {
    image: 'https://images.unsplash.com/photo-1533616688419-b7a585564566?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    name: '缤纷混合花束',
    price: 259,
    hideOnMobile: false
  },
  {
    image: 'https://images.unsplash.com/photo-1563241527-3004b7be0ffd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    name: '阳光向日葵花束',
    price: 229,
    hideOnMobile: true,
    hideOnTablet: false
  },
  {
    image: 'https://images.unsplash.com/photo-1526047932273-341f2a7631f9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80',
    name: '彩色郁金香花束',
    price: 289,
    hideOnMobile: true,
    hideOnTablet: true
  }
];

// 场景推荐
const sceneRecommendations = [
  {
    image: 'https://images.unsplash.com/photo-1549576490-b0b4831ef60a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
    title: '情人节专题',
    description: '表达爱意，从一束花开始'
  },
  {
    image: 'https://images.unsplash.com/photo-1523694576729-96116a39d392?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
    title: '母亲节专题',
    description: '感谢养育之恩'
  },
  {
    image: 'https://images.unsplash.com/photo-1589244159943-d873888bd414?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80',
    title: '毕业季专题',
    description: '青春不散场，情谊永相伴',
    hideOnMobile: true,
    hideOnTablet: true
  }
];

// 导航到商品详情页
const goToProductDetail = (product: any) => {
  router.push('/product-detail');
};

// 导航到分类页
const goToCategory = (category: any) => {
  router.push('/categories');
};

// 导航到场景页
const goToScene = (scene: any) => {
  router.push('/categories');
};
</script>

<template>
  <div class="min-h-screen flex flex-col" style="background-color: #f8f8f8;">
    <!-- 导航栏 -->
    <header class="bg-white p-4 border-b border-gray-200 shadow-sm">
      <div class="container mx-auto flex items-center justify-between">
        <a @click.prevent="router.push('/')" href="#" class="text-2xl font-bold text-rose-500 flex items-center">
          <font-awesome-icon icon="seedling" class="text-rose-500 mr-2" />
          花礼相伴
        </a>
        <div class="hidden lg:block w-1/3">
          <div class="relative">
            <input type="text" placeholder="搜索鲜花、场景..." 
              class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
            <font-awesome-icon icon="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
          </div>
        </div>
        <nav class="hidden md:flex space-x-6">
          <a @click.prevent="router.push('/')" href="#" class="text-rose-500 hover:text-rose-600 font-medium">首页</a>
          <a @click.prevent="router.push('/categories')" href="#" class="text-gray-600 hover:text-rose-500">分类</a>
          <a @click.prevent="router.push('/cart')" href="#" class="text-gray-600 hover:text-rose-500">购物车</a>
        </nav>
        <div class="flex items-center space-x-4">
          <a @click.prevent="router.push('/cart')" href="#" class="p-2 relative">
            <font-awesome-icon icon="shopping-cart" class="text-gray-600 text-xl" />
            <span class="absolute top-0 right-0 bg-rose-500 text-white rounded-full text-xs w-4 h-4 flex items-center justify-center">3</span>
          </a>

          <!-- 未登录状态 -->
          <template v-if="!userStore.checkIsLoggedIn">
            <a @click.prevent="router.push('/login')" href="#" class="hidden md:block text-gray-600 hover:text-rose-500">登录</a>
            <a @click.prevent="router.push('/register')" href="#" class="hidden md:block text-white bg-rose-500 px-4 py-2 rounded-lg hover:bg-rose-600 transition duration-300">注册</a>
          </template>

          <!-- 已登录状态 -->
          <template v-else>
            <div class="hidden md:flex items-center space-x-3">
              <div class="flex items-center space-x-2">
                <img
                  :src="userStore.getUserAvatar"
                  :alt="userStore.getDisplayName"
                  class="w-8 h-8 rounded-full object-cover"
                >
                <span class="text-gray-700">{{ userStore.getDisplayName }}</span>
              </div>
              <div class="relative group">
                <button class="text-gray-600 hover:text-rose-500">
                  <font-awesome-icon icon="chevron-down" class="text-sm" />
                </button>
                <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200">
                  <a @click.prevent="router.push('/user-center')" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人中心</a>
                  <a @click.prevent="router.push('/order-detail')" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">我的订单</a>
                  <a @click.prevent="router.push('/favorites')" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">我的收藏</a>
                  <div class="border-t border-gray-100"></div>
                  <a @click.prevent="handleLogout" href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
      <!-- 移动端搜索栏 -->
      <div class="mt-3 relative md:hidden">
        <input type="text" placeholder="搜索鲜花、场景..." 
          class="w-full pl-10 pr-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-rose-500">
        <font-awesome-icon icon="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
      </div>
    </header>

    <!-- 主体内容区域 -->
    <main class="flex-grow">
      <!-- 轮播图 -->
      <section 
        class="relative bg-white"
        @mouseenter="handleMouseEnter"
        @mouseleave="handleMouseLeave"
      >
        <div class="overflow-hidden h-48 md:h-80 lg:h-96 relative">
          <div class="carousel-container h-full">
            <transition-group name="slide" tag="div" class="h-full">
              <div 
                v-for="(slide, index) in slides" 
                :key="index"
                v-show="currentSlide === index"
                class="carousel-slide absolute inset-0"
              >
                <img 
                  :src="slide.image" 
                  :alt="slide.alt" 
                  class="w-full h-full object-cover"
                >
              </div>
            </transition-group>
          </div>
          
          <!-- 左右切换按钮 -->
          <button 
            @click.prevent="prevSlide" 
            class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-30 hover:bg-opacity-50 text-white rounded-full p-2 focus:outline-none"
            aria-label="上一张"
          >
            <font-awesome-icon icon="chevron-left" />
          </button>
          
          <button 
            @click.prevent="nextSlide" 
            class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-30 hover:bg-opacity-50 text-white rounded-full p-2 focus:outline-none"
            aria-label="下一张"
          >
            <font-awesome-icon icon="chevron-right" />
          </button>
        </div>
        
        <!-- 指示器 -->
        <div class="absolute bottom-2 left-0 right-0 flex justify-center gap-1">
          <span 
            v-for="(slide, index) in slides" 
            :key="index"
            @click="changeSlide(index)"
            :class="[
              'w-2 h-2 rounded-full cursor-pointer transition-all duration-300', 
              currentSlide === index ? 'bg-rose-500 w-4' : 'bg-gray-300'
            ]"
          ></span>
        </div>
      </section>

      <div class="container mx-auto px-4 py-8">
        <!-- 商品分类 -->
        <section class="p-4 md:p-6 bg-white rounded-lg shadow-sm mb-8">
          <h2 class="text-lg md:text-xl font-bold mb-4">商品分类</h2>
          <div class="grid grid-cols-4 md:grid-cols-8 lg:grid-cols-8 gap-3 md:gap-6">
            <a 
              v-for="(category, index) in categories" 
              :key="index"
              @click.prevent="goToCategory(category)"
              :class="[
                'text-center', 
                category.hideOnMobile ? 'hidden md:block' : ''
              ]"
              href="#"
            >
              <div :class="`bg-${category.color}-100 rounded-full h-14 w-14 md:h-20 md:w-20 flex items-center justify-center mx-auto mb-1`">
                <font-awesome-icon 
                  :icon="category.icon" 
                  :class="`text-${category.color}-500 text-lg md:text-2xl`" 
                />
              </div>
              <span class="text-sm md:text-base">{{ category.name }}</span>
            </a>
          </div>
        </section>

        <!-- 热门推荐 -->
        <section class="p-4 md:p-6 bg-white rounded-lg shadow-sm mb-8">
          <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg md:text-xl font-bold">热门推荐</h2>
            <a @click.prevent="router.push('/categories')" href="#" class="text-sm md:text-base text-gray-500 hover:text-rose-500">
              查看更多 <font-awesome-icon icon="angle-right" />
            </a>
          </div>
          <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
            <a 
              v-for="(product, index) in hotProducts" 
              :key="index"
              @click.prevent="goToProductDetail(product)"
              href="#"
              :class="[
                'bg-white rounded-lg overflow-hidden border border-gray-100 hover:shadow-md transition duration-300',
                product.hideOnMobile ? 'hidden md:block' : '',
                product.hideOnTablet && product.hideOnMobile ? 'hidden lg:block' : ''
              ]"
            >
              <img 
                :src="product.image" 
                :alt="product.name" 
                class="w-full h-36 md:h-48 object-cover"
              >
              <div class="p-3 md:p-4">
                <h3 class="font-medium md:text-lg truncate">{{ product.name }}</h3>
                <p class="text-rose-500 font-bold mt-1 md:mt-2 md:text-lg">¥{{ product.price }}</p>
              </div>
            </a>
          </div>
        </section>

        <!-- 节日/场景推荐 -->
        <section class="p-4 md:p-6 bg-white rounded-lg shadow-sm">
          <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg md:text-xl font-bold">场景推荐</h2>
            <a @click.prevent="router.push('/categories')" href="#" class="text-sm md:text-base text-gray-500 hover:text-rose-500">
              查看更多 <font-awesome-icon icon="angle-right" />
            </a>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
            <a 
              v-for="(scene, index) in sceneRecommendations" 
              :key="index"
              @click.prevent="goToScene(scene)"
              href="#"
              :class="[
                'block relative rounded-lg overflow-hidden h-24 md:h-40',
                scene.hideOnMobile ? 'hidden md:block' : '',
                scene.hideOnTablet && scene.hideOnMobile ? 'hidden lg:block' : ''
              ]"
            >
              <img 
                :src="scene.image" 
                :alt="scene.title" 
                class="w-full h-full object-cover"
              >
              <div class="absolute inset-0 bg-black bg-opacity-30 flex items-center p-4">
                <div>
                  <h3 class="text-white font-bold text-lg md:text-xl lg:text-2xl">{{ scene.title }}</h3>
                  <p class="text-white text-sm md:text-base opacity-90">{{ scene.description }}</p>
                </div>
              </div>
            </a>
          </div>
        </section>
      </div>
    </main>

    <!-- 底部导航栏 - 移动端 -->
    <footer class="md:hidden mt-auto bg-white border-t border-gray-200">
      <div class="flex justify-around py-2">
        <a href="#" class="flex flex-col items-center px-4 py-2 text-rose-500">
          <font-awesome-icon icon="home" class="text-lg" />
          <span class="text-xs mt-1">首页</span>
        </a>
        <a @click.prevent="router.push('/categories')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon icon="th-large" class="text-lg" />
          <span class="text-xs mt-1">分类</span>
        </a>
        <a @click.prevent="router.push('/cart')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon icon="shopping-cart" class="text-lg" />
          <span class="text-xs mt-1">购物车</span>
        </a>
        <a @click.prevent="router.push('/user-center')" href="#" class="flex flex-col items-center px-4 py-2 text-gray-500">
          <font-awesome-icon :icon="['far', 'user']" class="text-lg" />
          <span class="text-xs mt-1">我的</span>
        </a>
      </div>
    </footer>

    <!-- 页脚 - PC端 -->
    <footer class="hidden md:block bg-white border-t border-gray-200 py-8 mt-12">
      <div class="container mx-auto px-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <h4 class="text-lg font-bold mb-4">关于我们</h4>
            <ul class="space-y-2">
              <li><a href="#" class="text-gray-600 hover:text-rose-500">公司简介</a></li>
              <li><a href="#" class="text-gray-600 hover:text-rose-500">企业文化</a></li>
              <li><a href="#" class="text-gray-600 hover:text-rose-500">门店地址</a></li>
              <li><a href="#" class="text-gray-600 hover:text-rose-500">联系我们</a></li>
            </ul>
          </div>
          <div>
            <h4 class="text-lg font-bold mb-4">新手帮助</h4>
            <ul class="space-y-2">
              <li><a href="#" class="text-gray-600 hover:text-rose-500">购物指南</a></li>
              <li><a href="#" class="text-gray-600 hover:text-rose-500">配送方式</a></li>
              <li><a href="#" class="text-gray-600 hover:text-rose-500">支付方式</a></li>
              <li><a href="#" class="text-gray-600 hover:text-rose-500">常见问题</a></li>
            </ul>
          </div>
          <div>
            <h4 class="text-lg font-bold mb-4">商家合作</h4>
            <ul class="space-y-2">
              <li><a href="#" class="text-gray-600 hover:text-rose-500">入驻申请</a></li>
              <li><a href="#" class="text-gray-600 hover:text-rose-500">商家规则</a></li>
              <li><a href="#" class="text-gray-600 hover:text-rose-500">商家中心</a></li>
            </ul>
          </div>
          <div>
            <h4 class="text-lg font-bold mb-4">联系我们</h4>
            <div class="flex items-center mb-3">
              <font-awesome-icon icon="phone" class="text-rose-500 mr-2" />
              <span>客服热线: 400-123-4567</span>
            </div>
            <div class="flex items-center mb-3">
              <font-awesome-icon icon="envelope" class="text-rose-500 mr-2" />
              <span>邮箱: service@hualiflower.com</span>
            </div>
            <div class="flex space-x-4 mt-4">
              <a href="#" class="text-gray-500 hover:text-rose-500">
                <font-awesome-icon :icon="['fab', 'weixin']" class="text-2xl" />
              </a>
              <a href="#" class="text-gray-500 hover:text-rose-500">
                <font-awesome-icon :icon="['fab', 'weibo']" class="text-2xl" />
              </a>
              <a href="#" class="text-gray-500 hover:text-rose-500">
                <font-awesome-icon icon="envelope" class="text-2xl" />
              </a>
            </div>
          </div>
        </div>
        <div class="border-t border-gray-200 mt-8 pt-8 text-center">
          <p class="text-gray-600">&copy; 2023 花礼相伴鲜花配送网站. 所有权利保留.</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<style scoped>
/* 自定义样式 */
a {
  cursor: pointer;
}

/* 轮播图样式 */
.carousel-container {
  position: relative;
}

.carousel-slide {
  transition: all 0.5s ease;
}

/* 轮播图过渡动画 */
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s ease;
}

.slide-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.slide-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

/* 轮播图指示器样式 */
.carousel-indicator {
  transition: all 0.3s ease;
}

/* 响应式调整 */
@media (max-width: 640px) {
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* 与原始HTML保持一致的背景色 */
body {
  background-color: #f8f8f8;
}
</style>
